<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="robots" content="all"/>
    <title>文章列表</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/blog.css}"/>
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">MyBlog</a>
            <nav class="nav" id="nav">
                <ul>
                    <th:block th:include="include :: headnav"/>
                </ul>
            </nav>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content">
            <div class="inner">
                <article class="article-list bloglist" id="LAY_bloglist">
                </article>
            </div>
        </div>
        <div class="col-other">
            <div class="inner">
                <div class="other-item" id="categoryandsearch">
                    <div class="search">
                        <label class="search-wrap">

                            <input type="text" name="title" id="searchTxt" placeholder="输入关键字搜索"/>

                            <span class="search-icon" id="searchIcon">
					                <i class="fa fa-search"></i>
					            </span>
                        </label>
                        <ul class="search-result"></ul>
                    </div>
                    <ul class="category mt20" id="category">
                        <li data-index="3" class="slider"></li>
                        <li data-index="1"><a href="#">全部文章</a></li>
                        <li th:each="type,typeStat:${allType}" th:data-index="${typeStat.index}">
                            <a th:href="@{/user/toArticleByType/}+${type.id}" th:text="${type.name}">全部文章</a>
                        </li>
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                <div class="article-category">
                    <div class="article-category-title">分类导航</div>
                    <a th:each="type:${allType}" th:href="@{/user/toArticleByType/}+${type.id}"
                       th:text="${type.name}"></a>
                    <div class="f-cb"></div>
                </div>
                <!--遮罩-->
                <div class="blog-mask animated layui-hide"></div>
                <div class="other-item">
                    <h5 class="other-item-title">热门文章</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li th:each="hotBlog:${hotBlogs}">
                                <a th:href="@{/user/toReadBlog/}+${hotBlog.id}" target="_blank"
                                   th:text="${hotBlog.title}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">置顶推荐</h5>
                    <div class="inner">
                        <ul class="hot-list-article">
                            <li th:each="topBlog:${topBlogs}">
                                <a th:href="@{/user/toReadBlog/}+${topBlog.id}" target="_blank"
                                   th:text="${topBlog.title}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">最近访客</h5>
                    <div class="inner">
                        <dl class="vistor">
                            <dd th:each="userInfo:${recentViewUser}">
                                <a href="javasript:;">
                                    <img th:src="@{/file/getImg}+'/'+${userInfo.avatar}">
                                    <cite th:text="${userInfo.nickname}"></cite>
                                </a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<script>NProgress.start();</script>
<script th:src="@{/js/yss/article.js}"></script>
<th:block th:include="include :: commonJs"/>
<th:block th:include="include :: showWeChartQR"/>
<script th:inline="javascript">

    let basePath = [[${#httpServletRequest.getContextPath()}]];
    window.onload = function () {
        let admin_msg = [[${session.admin_msg}]];
        let a = [[${session.remove}]];
        if (admin_msg != "" && null != admin_msg) {
            layui.layer.msg(admin_msg);
        }

        NProgress.done();
    };

    let turnToSearch = function () {
        let para = $('#searchTxt').val();
        console.log(para)
        console.log(para == '');
        if (para == '') {
            para = "";
        }
        window.open(basePath + "/user/toSearchArticle?title=" + para, "_blank");
    }
    $('#searchTxt').keydown(function (e) {
        if (e.keyCode == 13) {
            turnToSearch();
        }
    });
    $('#searchIcon').click(function () {
        turnToSearch();
    })
    layui.use('flow', function () {
        let flow = layui.flow;
        flow.load({
            elem: '#LAY_bloglist' //指定列表容器
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                let lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('/blog/more?typeId=' + 0 + '&page=' + page, function (res) {
                    res = JSON.parse(res);
                    //假设你的列表返回在data集合中
                    layui.each(res.data, function (index, item) {
                        let isRecommend = '';
                        if (item.recommend) {
                            isRecommend = '<div class="fc-flag">' + '置顶' + '</div>';
                        }
                        let firstPicPath = item.firstPic;
                        if (firstPicPath.substr(0, 2) != "D:") {
                            firstPicPath = '/linux' + firstPicPath;
                        }
                        lis.push('<section class="article-item zoomIn article">\n' +
                            isRecommend +
                            '<h5 class="title">\n' +
                            '<span class="fc-blue">【' + item.flag + '】</span>\n' +
                            '<a href="' + basePath + '/user/toReadBlog/' + item.id + '" target="_blank">' + item.title + '</a>\n' +
                            '</h5>\n' +
                            '<div class="time">\n' +
                            '<span class="day">' + item.day + '</span>\n' +
                            '<span class="month fs-18">' + item.month + '<span class="fs-14">月</span></span>\n' +
                            '<span class="year fs-18 ml10">' + item.year + '<span class="fs-14">年</span></span>\n' +
                            '</div>\n' +
                            '<div class="content">\n' +
                            '<a href="' + basePath + '/user/toReadBlog/' + item.id + '" target="_blank" class="cover img-light">\n' +
                            '<img src="/file/getImg/' + firstPicPath + '">\n' +
                            '</a>\n' +
                            item.content +
                            '</div>\n' +
                            '<div class="read-more">' +
                            '<a href="' + basePath + '/user/toReadBlog/' + item.id + '"  target="_blank" class="fc-black f-fwb">继续阅读</a>' +
                            '</div>' +
                            '<aside class="f-oh footer">' +
                            '<div class="f-fl tags">' +
                            '<span class="fa fa-tags fs-16"></span>' +
                            '<a class="tag" target="_blank" href="' + basePath + '/user/toArticleByType/' + item.type.id + '">' + item.type.name + '</a>' +
                            '</div>\n' +
                            '<div class="f-fr">' +
                            '<span class="read">' +
                            '<i class="fa fa-address-card-o fs-16"></i>' +
                            '<i class="num">&nbsp;' + item.author + '&nbsp;&nbsp;</i>' +
                            '</span>' +
                            '<span class="read">' +
                            '<i class="fa fa-eye fs-16"></i>' +
                            '<i class="num">&nbsp;' + item.views + '</i>' +
                            '</span>' +
                            '<span class="ml20">' +
                            '<i class="fa fa-comments fs-16"></i>' +
                            '<a href="javascript:void(0)" class="num fc-grey">&nbsp;' + item.comments + '</a>' +
                            '</span>' +
                            '</div>' +
                            '</aside>' +
                            '</section>');
                    });
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                });
            }
            , end: "<h3 style='color: black;font-weight:bold'>没有更多了</h3>"
        });
    });
</script>
</body>
</html>
